<template>
  <div class="page">
    <header>
      <van-nav-bar title="自定义表单" left-arrow @click-left="$router.go(-1)" />
    </header>
    <van-tabs v-model="active" color="#FEB518" title-active-color="#FEB518" @change="tabChange">
      <van-tab title="全部"></van-tab>
      <van-tab title="已开启"></van-tab>
      <van-tab title="未开启"></van-tab>
    </van-tabs>
    <van-list class="list" v-model="loading" :finished="finished" :error.sync="error" finished-text="没有更多了"
      error-text="请求失败，点击重新加载" @load="getList">
      <div class="item" v-for="item in dataList" :key="item.id">
        <CusItem :info="item" />
      </div>
      <van-empty v-if="!dataList.length" :image="emptyImg" description="暂无数据" />
    </van-list>
  </div>
</template>
<script>
import {
  getFormPageList
} from "@/api/flow";
import { mapGetters } from 'vuex'
export default {
  components: {
    CusItem: () => import('./components/cus-item.vue')
  },
  data() {
    return {
      active: 0,
      page: {
        page: 1,
        pageSize: 10,
        status: null
      },
      error: false,
      loading: false,
      finished: false,
      dataList: [],
      emptyImg: require("@/assets/img/empty-data.png"),
    }
  },
  computed: {
    ...mapGetters([
      "flowQueryData"
    ])
  },
  methods: {
    async getList(page) {
      if (page) {
        this.page.page = 1
        this.dataList = []
      }
      if (this.page.status === null) {
        delete this.page.status
      }
      const { merchantId, merchantNo } = this.flowQueryData
      await getFormPageList({ ...this.page, merchantId, mercNo: merchantNo })
        .then(({ data }) => {
          if (data.code !== 0) {
            return Promise.reject(data)
          }
          this.page.page +=  1
          this.finished = data.data.isLastPage
          this.dataList.push(...data.data.list)
        })
        .catch(err => {
          this.$toast(err.msg)
        })
        this.loading = false;
    },
    tabChange(e) {
      const statusSet = {
        0: null,
        1: 1,
        2: 0
      }
      this.page.status = statusSet[e]
      this.getList(1)
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  width: 100vw;
  height: 100vh;
  background-color: rgb(249, 249, 249);
}

.list {
  padding-top: 24px;
  width: 100%;
  height: auto;
  overflow-y: scroll;
}

.item {
  width: 91.5%;
  margin: 0 auto;
  margin-bottom: 20px;
}
</style>